<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import LandingSection from './Main components/LandingSection.vue'
import ArticleList from './components/ArticleList.vue'
import MenuDrawer from './components/MenuDrawer.vue'
import Head from './components/HeaderNav.vue'
import { Menu } from 'lucide-vue-next'

// 控制文章显示
const showArticles = ref(false)
// 控制菜单按钮显示
const showMenuButton = ref(false)

// 存储IntersectionObserver实例
const observer = ref(null)
const menuObserver = ref(null)
let hasActivated = false

// 控制文章列表刷新
const handleIntersection = (entries) => {
  const landingEntry = entries[0]
  if (!hasActivated && (!landingEntry.isIntersecting || landingEntry.intersectionRatio < 0.5)) {
    showArticles.value = true
    hasActivated = true
  }
  if (landingEntry.isIntersecting && landingEntry.intersectionRatio >= 0.9) {
    hasActivated = false
  }
}

// 控制菜单按钮显示/隐藏
const handleMenuButtonVisibility = (entries) => {
  const contentEntry = entries[0]
  showMenuButton.value = contentEntry.isIntersecting && contentEntry.intersectionRatio >= 0.99
}

onMounted(() => {
  // 文章显示的观察者
  observer.value = new IntersectionObserver(handleIntersection, {
    threshold: [0.5, 0.9],
    rootMargin: '-50px 0px 0px 0px'
  })

  // 菜单按钮显示的观察者
  menuObserver.value = new IntersectionObserver(handleMenuButtonVisibility, {
    threshold: [0.99], // 设置一个很高的阈值，确保几乎完全可见才显示
    rootMargin: '0px'
  })

  const landingElement = document.querySelector('.landing-section')
  const contentElement = document.querySelector('.content-section')

  if (landingElement) {
    observer.value.observe(landingElement)
  }

  if (contentElement) {
    menuObserver.value.observe(contentElement)
  }
})

onUnmounted(() => {
  if (observer.value) {
    observer.value.disconnect()
  }
  if (menuObserver.value) {
    menuObserver.value.disconnect()
  }
})

const menu = ref(false)
</script>

<template>
  <div class="blog-container">
    <Head class="header-nav"/>
    <div class="router">
      <RouterView/>
    </div>
    <LandingSection class="landing-section" />
    <div class="content-section" :class="{ 'show': showArticles }">
      <el-button
        v-show="showMenuButton"
        type="primary"
        class="menu-button"
        @click="menu = true"
      >
        <Menu size="20" />
      </el-button> 
       
      <ArticleList class="article-list" />
    </div>
    <MenuDrawer v-model="menu" />
  </div>
</template>

<style scoped>
.blog-container {
  min-height: 100vh;
  background-color: #1a1a1a;
}

.landing-section {
  height: 100vh;
  position: relative;
  height: calc(100vh - 60px);
  /* 减去头部高度 */
}

.content-section {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  padding: 20px;
  gap: 20px;
}

.content-section.show {
  opacity: 1;
  transform: translateY(0);
}

.menu-button {
  position: fixed;
  top: 40px;
  left: -5px;
  display: flex;
  padding: 18px 12px;
  align-items: center;
  color: rgb(36, 36, 36);
  border: none;
  background-color: #a5a5a5;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}

.menu-button:hover {
  color: #ffffff;
  background-color: #888888;
}

.article-list {
  flex-grow: 1;
  max-width: 800px;
}

@media (max-width: 1200px) {
  .article-list {
    width: 100%;
    max-width: 800px;
  }
}

:deep(.el-drawer) {
  color: white;
  padding: 0;
  background-color: #2f2e31 !important;
}

:deep(.el-drawer__body) {
  padding: 0px;
  padding-top: 10px;
}
</style>